<template>
  <div style="padding:20px 100px; background: #f5f4f8; min-height: 700px">
    <a-row :gutter="20" justify="center">
      <a-col :span="3">
        <a-card v-if="!leftMenu" title="功能区域" :bordered="false" class="content-card">
          <a-empty
              image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
              :image-style="{ height: '60px'}"
              description="请选择功能"
              class="content-card-empty"
          >
          </a-empty>
        </a-card>
        <a-card v-if="leftMenu" :title="leftMenu.menuname" :bordered="false" class="content-card">
          <a-empty
              v-if="!leftMenu.leftMenuLists.length"
              image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
              :image-style="{ height: '60px'}"
              description="暂无功能"
              class="content-card-empty"
          >
          </a-empty>
          <ul v-if="leftMenu.leftMenuLists.length">
            <li v-for="(m, index) in leftMenu.leftMenuLists" :key="m.menuid" :class="index === clickIndex ?'content-li-1': 'content-li-0'" @click="clickLeftMenu(m, index)">
              <span>{{ m.menuname }}</span>
            </li>
          </ul>
        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card :title="conTitle" :bordered="false">
          <router-view/>
        </a-card>
      </a-col>
      <a-col :span="5">
        <a-card title="Card title" :bordered="false">
          <p>card content</p>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {getCurrentInstance, onBeforeUnmount, ref} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "contentView",
  setup() {
    const {proxy} = getCurrentInstance()
    const router = useRouter()

    /** 左侧菜单 **/
    let leftMenu = ref()
    proxy.$mitt.on('leftMenu', (data) => {
      leftMenu.value = data
    })
    onBeforeUnmount(() => {
      proxy.$mitt.off('leftMenu')
    })

    /** 中间title **/
    const conTitle = ref('内容区域')

    /** 点击左侧菜单 **/
    const clickIndex = ref()
    function clickLeftMenu(data, index) {
      clickIndex.value = index
      conTitle.value = data.menuname
      router.push({
        name: data.menuid
      })
    }

    return {
      leftMenu,
      conTitle,
      clickIndex,
      clickLeftMenu,
    }
  }
}
</script>

<style>
.content-card .ant-card-body {
  padding: 0;
}

.content-card .ant-card-body .content-card-empty {
  margin: 24px 14px 38px;
}

.content-card .ant-card-body ul {
  list-style-type: none;
  padding-left: 0;
}

.content-card .ant-card-body ul li {
  margin: 5px 0;
  padding: 10px 25px;
  cursor: pointer;
}

.content-card .ant-card-body ul li:hover {
  color: #5db2ff;
}

.content-li-0 {
  color: #262626;
  background-color: #ffffff;;
}

.content-li-1 {
  background-color: #e6f7ff;
  color: #5db2ff;
}
</style>
